<template lang="html">
	<div class="market-wrap">
		<div style="position: fixed;top: 0px;left: 0;z-index: 2000;width: 100%;background: #fff;">
			<div style="padding: 0 15px ;">
				<div class="header">
					<div class="a" @click="goAppHome">
						<img src="../../../static/img/lanhu/30.png" alt="" />
					</div>
					<div class="d" @click="goAppHome">
						<img src="../../../static/img/lanhu2/16.png" alt=""/>
					</div>					
					<div class="b" @click="link('/market/goods/search')">
						<div class="b_1">
							<img src="../../../static/img/lanhu/31.png" alt="" />	
							<span>请输入关键字</span>
						</div>								
					</div>
					<div class="c" @click="getScan">
						<img src="../../../static/img/lanhu/29.png" alt="" />
					</div>
				</div>
			</div>	
            
            

			
			<!--<div style="position: relative;">
				<ly-tab
					fixBottom
				    v-model="tabId"
				    :items="items"
				    @change="changeTab"
				    lineWidth='40px'
				    :options="options">
				</ly-tab>
	        </div>-->
	        

	        
			<van-tabs color="#FFD630"  @change="changeTab" ellipsis>
			  <van-tab v-for="(item,index) in items2" :key="index" :title="item.categoryName" :name="item.categoryId">
			
			  </van-tab>
			</van-tabs>	        
	        
			<!--<div style="position: relative;">
				<ly-tab
				    v-model="selectedId"
				    :items="items1"
				    >
				</ly-tab>
	        </div>	        -->
        </div>
        
        <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
	        <div class="swiper">
				<van-swipe :autoplay="4000" indicator-color="#fff">
				  <van-swipe-item @click="link('/otherFun/strategy')">
				    <img src="../../../static/img/lanhu2/28.png">
				  </van-swipe-item>		  
				  <van-swipe-item  @click="link('/market/im/standard')">
				    <img src="../../../static/img/lanhu2/29.png" >
				  </van-swipe-item>					  
				</van-swipe>            	
	       </div> 


	        
	         <!--<div style="padding: 8px 15px 10px;" @click="link('/market/im/standard')">
	         	<img src="../../../static/img/lanhu2/23.png" style="width: 100%;">
	         </div>-->
            
	        <div class="container">   
	        	<!--<div class="wrap">
	        		<div class="title">
	        			<div class="h1">发现好物</div>
	        			<div class="h2">帮你省心买好物</div>
	        		</div>        		
	        		<div class="list">
	        			<div class="li" v-for="(item,index) in items2" :key="index" @click="linkCategoryList(item)">
	        				<div class="top">
	        					<img :src="item.categoryImageUrl" alt="" />        					
	        				</div>
	        				<div class="word">{{item.categoryName}}</div>
	        			</div>       			
	        		</div>
	        	</div>-->
				<van-list
				  v-model="loading"
				  :finished="finished"
				  finished-text="没有更多了"
				  @load="onLoad"
				  :immediate-check="false"
				  loading-text=" "
				  :style="{minHeight: clientHeight + 'px' }"	
				  offset='800'
				>		
				<div class="ul">
					  <div class="section_list">
					    <div class="box" @click="jumpDetail(item)"
					    	 v-for="item in goodsList1">				    	 		   
					    	<div class="imgWrap" :style="{backgroundImage: 'url(' + item.goodsImage + ')'}">
					    	</div>
					    	
					    	<div class="desc">
					    	   <div class="title">
					    	   	<!--<span class="tag">
					    	   		<img src="../../../static/img/lanhu/32.png" alt="" />
					    	   		<img src="../../../static/img/lanhu/33.png" alt="" />
					    	   	</span>-->
					    	   	<span>{{item.comName}}</span>
					    	   </div>
					    	   <div class="desc_layout1">
					    	   	  <span class="tag"></span>
					    	   	  <span>{{item.goodsWants}}人想要</span>
					    	   </div>
					    	   <div class="desc_layout1">
					    	   	  <span class="price1">&yen;<span>{{item.comPrice}}</span></span>
					    	   	  <span class="price2" v-if="item.comOriginalprice>0">&yen;<span>{{item.comOriginalprice}}</span></span>
					    	   </div>						    	   
						       <div class="desc_layout2">
						    		<img :src="item.avatar" alt="" />
						    		<span style="vertical-align: -3px;">{{item.userNickname}}</span>
						       </div>							       
					    	</div>						    							    	
					    </div>				  	
					  	
					  </div>
					  
					  <div class="section_list">
					    <div class="box" @click="jumpDetail(item)"
					    	 v-for="item in goodsList2">				    	 		
					    	
					    	<div class="imgWrap" :style="{backgroundImage: 'url(' + item.goodsImage + ')'}">
					       
					    	</div>						    							    	
					    	<div class="desc">
					    	   <div class="title">
					    	   	<!--<span class="tag">
					    	   		<img src="../../../static/img/lanhu/32.png" alt="" />
					    	   		<img src="../../../static/img/lanhu/33.png" alt="" />
					    	   	</span>-->
					    	   	<span>{{item.comName}}</span>
					    	   </div>
					    	   <div class="desc_layout1">
					    	   	  <span class="tag"></span>
					    	   	  <span>{{item.goodsWants}}人想要</span>
					    	   </div>
					    	   <div class="desc_layout1">
					    	   	  <span class="price1">&yen;<span>{{item.comPrice}}</span></span>
					    	   	  <span class="price2" v-if="item.comOriginalprice>0">&yen;<span>{{item.comOriginalprice}}</span></span>
					    	   </div>						    	   
						       <div class="desc_layout2">
						    		<img :src="item.avatar" alt="" />
						    		<span style="vertical-align: -3px;">{{item.userNickname}}</span>
						       </div>							       
					    	</div>						    							    	
					    </div>				  	
					  </div>
				  </div>

				</van-list>	        	
	            <!--<div class="wrap2">   
				  <div class="container-water-fall">				  					  					  	
				
				  </div>             	
	            </div>-->
	        </div> 
        </van-pull-refresh>  
        
        
		<div>
			<van-dialog v-model="showOrderPopup" :showConfirmButton="false" width="230px" class="orderPopupWrap">
	            <div class="orderPopupImgWrap" :style="{backgroundImage: 'url(' + data.goodsImage + ')'}" @click="goMessage">
	            	<div class="orderPopupTips">点击查看详情</div>
	            </div>
                <div class="orderPopupInfo">
                	<div class="orderPopup_word1">{{data.comName}}</div>
                	<div class="orderPopup_word2">您有{{data.count}}单未付款订单</div>
                </div>
                <div class="orderPopup_clear" >
                	<img src="../../../static/img/lanhu2/15.png" alt="" @click="showOrderPopup=false"/>
                </div>
			</van-dialog>  		
		</div>        
        
        
	    <Footer ref="footer"></Footer>  
	</div>
</template>                                                                

<script>
import '@/assets/reset/index.css'
import Footer from '_c/market/newFoot'
import {getFun} from '@/api/publicFun.js'	 
let publicFun=getFun()
export default {
	name: 'MarketIndex',
	components: {
	    Footer
	},	
	data() {
       return {  	
	    loading: false,
	    finished: false,       	
       	refreshLoading:false,
       	showOrderPopup:false,
       	data:{},
	    items: [],   // 导航分类数组	                         
	    items2:[],                // 储存发现数组
	    swiper:[],                // 储存轮播数据
        goodsList:[],             // 显示的数据列表
        goodsList1:[],
        goodsList2:[],
	   	url2:this.$api+'/marketorderservice/api/v1/market/indexShowGoodsList',   // 用于请求商品数据列表
	    params:{pageNum:1},       // 保存页码	    	    	          	     	
		url1:this.$api+'/marketorderservice/api/v1/market/category/listVo', // 导航分类接口
		url3:this.$api+'/marketorderservice/api/v1/market/goods/pictureList/',// 轮播图片接口
		url4:this.$api+'/marketorderservice/api/v1/market/category/kjcategory/', // 发现分类接口
		url5:this.$api+'/marketorderservice/api/v1/market/getNoPayOrdersInfo', // 未付款订单接口		
		url6:this.$api+'/marketorderservice/api/v1/market/goods/statistics', // 统计用
		url7:this.$api+'/marketorderservice/api/v1/market/category/selectMostCountCategoryList',
		currentCategoryId:'', // 用于绑定当前选中的分类ID      
       }
	},
	methods: {	
		onLoad() {
         if(this.params.pageNum==1){
         	return false
         }
		 let that=this
		 setTimeout(() => {		 	
	        that.getData()
	      }, 300);   			
		},
		onRefresh(){
		 let that=this	
		 setTimeout(() => {
		 	that.refreshLoading=false
	        that.params.pageNum=1
	        that.goodsList1=[]
	        that.goodsList2=[]
	        that.getData()
            // window.location.reload()
		 }, 1000);    			
		},
		// 跳转到商品类目页
		linkCategoryList(item){
			let categoryId=item.categoryId
			let categoryName=item.categoryName			
			let arg='[{"categoryId":"'+categoryId+'"},{"categoryName":"'+categoryName+'"}]' 
			this.link('/market/goods/categoryList',arg)
		},
        // 获取数据
        getData(){
		  let that=this
		  that.$Axios2.postRequest(that.url2,{"categoryId":this.currentCategoryId},{"pageNum":that.params.pageNum}).then(function(res) {		  		  	
            if(that.params.pageNum>res.data.page.pages){
            	that.finishedText='我也是有底线的' 
            	that.finished = true;
            	return false
            }else{	  	
            	for(var i=0;i<res.data.page.records.length;i++){
            		if(i%2==0){
            			that.goodsList1.push(res.data.page.records[i])            			
            		}else{
            			that.goodsList2.push(res.data.page.records[i])
            		}
            	}	           
	            that.params.pageNum++   //  下一次请求的时候页码加1	
	            that.loading = false;   // 关闭加载中
	            that.finished = false;  // 数据加载未完成	
            }
                    	                                      
		  })	      	
        },	    
        loadMore(){    
           this.params.pageNum++
           this.getData()
        },		
        // 切换分类
	    changeTab(name){
           this.params.pageNum=1
           this.currentCategoryId=name
           this.goodsList1=[]
           this.goodsList2=[]
           this.getData()           
	    },
	    // 跳转到详情页 // 要判断商品是否存在
	    jumpDetail(item){
	   	   let arg='[{"comId":"'+item.comId+'"}]' 
	   	   this.linkGoodsDetail(this.userId,item.comUid,arg)
	    },
	    // 顶部分类初始化
	    init(){
		  let that=this	
		  // 获取分类
//	      this.$Axios2.Post(this.url1, {"parentId":0,"counts":6,"status":"0"})
//	      .then(function(res) {	 
//	         that.items=res.categoryList;
//	         that.currentCategoryId=res.categoryList[0].categoryId; 
//	         that.getData() 
//	      })		      
//	      this.$Axios2.Get(this.url3+'1/4/'+this.userId)
//	      .then(function(res) {	  
//           that.swiper=res.data.picList
//	      })
          // 检测封禁账号
	      this.$Axios.Get(this.url6+'/'+this.userId)
	      .then(function(res) {
	      	if(res.responseCode==300){
			    that.$dialog.alert({
			      message: '账号封禁,不允许操作',
			    });
			    setTimeout(function(){
			    	that.goAppHome()
			    },3000)
	      	}
	      })
	      // 商品数量最多的前n条类
	      this.$Axios2.Get(this.url7+'/0/5')
	      .then(function(res) {
             that.items2=res.categoryList
             return res.categoryList
	      }).then((res2)=>{
	      	that.currentCategoryId=res2[0].categoryId
	      	that.getData()
	      })

	   },
	   // 扫码回调函数
	   callJsScan(str) {
		if(this.IsURL(str)){
			if(str.indexOf('/market/goods/shareDetail')>=0){
                str=str.replace(/shareDetail/,'detail')
                window.location.href=str 
			}else{
				window.location.href=str  // 跳转网址
			}
			
		}else{
			let arg='[{"scanStr":"'+str+'"}]' 
			this.link('/otherFun/errorScan',arg)
		}			
	   },
	   getOrders(){	  
         let that=this
	   	 let status=this.goIndexPopup()
	   	 if(status=='1'){
		     this.$Axios2.Get(this.url5+'/'+this.userId).then(function(res) {			       
		       if(res.data){
		           that.data=res.data
		           that.showOrderPopup=true			           
		       }
		     })		   	 	
	   	 }
	   }
	},
	beforeRouteEnter(to, from, next) {
	  next(vm=>{
	  	 vm.$refs.footer.interval()
	  })
	},
	beforeRouteLeave(to, from, next) {
	  this.$refs.footer.clear()
	  next();
	},	
	mixins:[publicFun],//混入
	mounted() {	
	  this.init()
	  window.callJsScan = this.callJsScan  
	}
  }
</script>
<style lang="scss" >
.van-hairline--top-bottom::after{border:none}	
.line{position: absolute;width: 38px;height: 3px;background: #FFD630!important;left: 23px;bottom: 3px;border-radius: 1.5px;}
.market-wrap{min-height: 100%;background: #fff;width: 100%;
   .header{display: flex;align-items: center;padding:5px 0 0px;
   	 .a{img{width: 11px;height: 19px;display: block;}}
   	 .d{margin: 0 10px;img{width: 45px;display: block;}}
   	 .b{flex: 1;padding: 0 15px 0 0px;
   	   .b_1{display:flex;align-items: center;background: #f7f7f7;padding:8px 0 8px 15px;
   	      img{width: 13px;height: 14px;display: block;margin-right: 10px;}
   	      span{color: #666;font-size: 14px}
   	   }
   	 }
   	 .c{img{width: 20px;height: 19px;display: block;}}
   }
   .swiper{margin-top: 80px;padding: 8px 15px 10px;
     img{width: 100%;display: block;border-radius: 3px 5px 5px;padding: 0 1px;}
   }
   .container{padding: 10px 15px 60px;background: #f8f8f8;
     .wrap{padding: 15px;background: #fff;
       .title{display: flex;align-items: center;
       	.h1{font-size: 18px;color: #FB713B;font-weight: bold;}
       	.h2{font-size: 12px;margin-left: 14px;color: #999;}
       }
       .list{display: flex;margin-top: 10px;
         .li{display: flex;flex-direction: column;justify-content: center;align-items:center;flex:1;
         	.top{
         		img{width: 55px;height: 55px;border-radius: 8px;display: block;}
         	}
         	.word{margin-top: 5px;font-weight: bold;color: #333;}
         }
       }
     }   
   }
}
*{box-sizing: border-box;}
/*.ul{display: flex;flex-wrap: wrap;}*/
.ul{
  display: flex;
}
.section_list{width: 50%;display: flex;flex-direction: column;}
.box {margin-top:16px;padding: 0 5px;width: 100%;}
.imgWrap{width: 100%;height: 150px;overflow: hidden;position: relative;
border-radius: 10px 10px 0 0;background-position: 50% 50%;background-size:99.9%;background-repeat: no-repeat;}
/*.imgWrap>img{width: 100%;border-radius: 10px 10px 0 0;display:block;position: relative;min-height: 150px;}*/
.desc{background: #fff;border-radius: 0 0 10px 10px;padding: 10px;}
.desc .title{font-weight: bold;font-size: 15px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;}
.desc_layout1{display: flex;justify-content: space-between;margin-top: 10px;color: #bcbcbc;}
.price1{font-weight: bold;color: #FF3B30;font-size: 14px;}
.price2{text-decoration: line-through;}
.tag>img{width: 32px;height: 16px;display: inline-block;vertical-align: -3px;margin-right: 4px;}
.x-red{color: #e86468;font-weight: bold;}
.ft16{font-size: 16px;}
.desc_layout2{display: flex;margin-top: 5px;color: #bcbcbc;align-items: center;}
.desc_layout2>img{width: 20px;height: 20px;border-radius: 50%;margin-right: 5px;} 














</style>



